<template>
  <div class="allTop">
    <div>

         <van-nav-bar
        title="我的报告"
        left-text="返回"
        right-text="分享"
        left-arrow
        @click-left="onClickLeft"
        @click-right="showShare = true"
        :class="{Fixed:isFixed }"
       />

        <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />

        
     
     
     
    </div>

    <div class="r-center">
      <div class="RcenterOne">健康指数</div>
      <div class="RcenterTwo">{{ num }}</div>
      <div class="RcenterThree"><button @click="toallReport">查看全部目录</button></div>
      <div class="RcenterFour">
        您的健康指数为{{ num }}，比{{ nums }}的人更健康
      </div>
    </div>

    <div>
      <van-cell-group>
        <van-cell title="历史对比" class="r-footer" />
        <van-cell title="身高" :value="users[0].renheight" />
        <van-cell title="体重指数BMI" :value="users[0].renweight" />
        <van-cell title="收缩压" :value="users[0].shrink" />
        <div ref="box" :class="{ isshow }" v-if="isshow">
          <van-cell title="舒张压" :value="users[0].diastole" />
          <van-cell title="血小板" :value="users[0].platelet" />
        </div>
        <van-cell class="RfooterOne" :title="title" @click="fnHide"></van-cell>
      </van-cell-group>
    </div>

    <div>
      <van-cell-group>
        <van-cell title="异常指标" class="r-footer" />
        <van-cell title="血小板" :value="users[0].noplatelet" />
      </van-cell-group>
    </div>

    <div>
      <van-cell title="综述" class="r-footer" />
      <van-cell title="终检结论" />
      <div>
        <p class="RfooterTwo">
          1.血液常规提示:血小板值偏低{{ users[0].platelet }}。建议内科复查随访
        </p>
      </div>
      <van-cell title="医疗保健" />
      <div class="RfooterTwo2">
        <p class="RfooterTwo">
          1.血小板减少：血小板是血液基本成分之一，参与止血和血栓形成，
          血小板计数是每单位容积周围血液中血小板的数量，低于100*10（9次方）/L为血小板计数减少。
          清晨、女性月经前可呈一过性减少，一般无临床意义。病理性减少见于原发性血小板减少性紫癜、
          再生障碍性贫血、放射性损伤、某些药物反应、脾功能亢进等
        </p>
        <p class="RfooterTwo">2.建议内科复查随访</p>
      </div>
    </div>

    <div class="r-btom">
      <van-button
        type="primary"
        text="咨询医生"
        @click="show = true"
        class="RBtomOne"
      />
      <van-overlay :show="show" @click="show = false">
        <div class="wrapper">
          <div class="block" @click.stop>
            <div>您是否需要截屏体检报告数据咨询医生</div>
            <div>截屏并咨询</div>
            <div @click="tounscramble">直接咨询</div>
            <div @click="show = false">暂时不咨询医生</div>
          </div>
        </div>
      </van-overlay>

      <van-button type="primary" to="index" class="RBtomTwo"
        >快速挂号</van-button
      >
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import "vant/lib/index.css";
import { NavBar } from "vant";
import { Toast } from "vant";
import { Cell, CellGroup } from "vant";
import { Collapse, CollapseItem } from "vant";
import { Button } from "vant";
import { Overlay } from "vant";
import { ShareSheet } from "vant";

Vue.use(ShareSheet);

Vue.use(Overlay);

Vue.use(Button);

Vue.use(Collapse);
Vue.use(CollapseItem);

Vue.use(Cell);
Vue.use(CellGroup);

Vue.use(NavBar);
// 自定义指令

export default {
  data() {
    return {
      isFixed: false,
      activeNames: "",
      users: [
        {
          renheight: "160.5cm",
          renweight: "18.3",
          shrink: "96mmHg",
          diastole: "66mmHg",
          platelet: "103.00*10^9/L",
          noplatelet: "↓03.00*10^9/L",
        },
      ],

      title: "显示更多     ∨",
      num: "87",
      nums: "80%",
      isshow: false,
      show: false,

      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "设置", icon: "weapp-qrcode" },
        ],
      ],
    };
  },

  methods: {
    toallReport(){
      this.$router.push('/allReport')
    },
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("分享");
    },
    fnHide() {
      // if(this.isshow = true){
      //     this.isshow = false
      //     this.title = '收起'
      //     //  console.log(this.isshow)
      // }else{
      //     console.log(this.isshow)
      //     this.isshow = true
      //     this.title = '显示更多'
      // }
      if (this.isshow) {
        this.isshow = false;
        this.title = "显示更多   ∨";
      } else {
        this.isshow = true;
        this.title = "收起    ∧";
      }
    },

    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    tounscramble(){
      this.$router.push('/unscramble')
    }
  },
  mounted() {
    // 1、监听屏幕滚动
    window.addEventListener("scroll", (e) => {
      // 2、获取滚动条距离顶部高度
      let scrollTop = document.documentElement.scrollTop;
      // console.log(scrollTop)
      // 6、根据滚动条高度来决定是否吸顶
      // console.log( this.isFixed)
      if (scrollTop >= 50) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    });
  },
};
</script>

<style scoped>
/* .allTop{
  height: 800px;
} */
.r-center {
  width: 100%;
  height: 152px;
  background: #f2f2f2;
  text-align: center;
}
.RcenterOne {
  font-size: 14px;
  padding-top: 20px;
}
.RcenterTwo {
  font-size: 26px;
  font-weight: bold;
  padding-top: 15px;
}
.RcenterThree button {
  width: 180px;
  height: 32px;
  border: 1px solid #00cccc;
  color: #00cccc;
}
.RcenterFour {
  padding-top: 10px;
  color: #333333;
  font-size: 14px;
}

.r-footer {
  background: #e4e4e4;
}
.RfooterOne {
  text-align: center;
  color: #00cccc;
}
/* .isshow{
    display: none;
} */

.RfooterTwo {
  padding: 10px 15px;
  font-size: 14px;
  line-height: 20px;
}
.RfooterTwo2 {
  height: 300px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 307px;
  height: 203px;
  background-color: #fff;
  color: #00cccc;
}
.block div {
  font-size: 14px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-bottom: 1px solid #00cccc;
}
.block div:nth-child(1) {
  border-top: 1px solid #00cccc;
  color: #333333;
  font-weight: bold;
}

.r-btom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
.RBtomOne {
  width:50%;
  height: 40px;
  background: #fff;
  color: #00cccc;
  border: 1px solid #00cccc;
}
.RBtomTwo {
  width:50%;
  height: 40px;
  background: #00cccc;
  color: #fff;
}

.Fixed {
  position: fixed;
  top: 0;
  width: 100%;
}
</style>